<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>[[${admin_site_title}]]注册</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="css/blue.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/AdminLTE.min.css">
  <!-- jQuery 3 -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="js/bootstrap.min.js"></script>
  <!-- iCheck -->
  <script src="js/icheck.min.js"></script>
  
  <style>
    /* 添加流畅的动画效果 */
    .form-control {
      transition: all 0.3s ease-in-out;
      border-left: 3px solid transparent;
    }
    .form-control:focus {
      border-left: 3px solid #3c8dbc;
      box-shadow: 0 0 8px rgba(60, 141, 188, 0.2);
    }
    .btn {
      transition: all 0.2s ease;
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .register-box {
      animation: fadeIn 0.6s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .has-feedback .form-control-feedback {
      transition: color 0.3s ease;
    }
    .form-group:hover .form-control-feedback {
      color: #3c8dbc;
    }
  </style>

</head>
<body class="hold-transition register-page">
<div class="register-box">
  <div class="register-logo">
    <a href="#">网站标题</a>
  </div>
  <!-- /.register-logo -->
  <div class="register-box-body">
    <p class="login-box-msg">注册新账户</p>
    <form id="registerForm">
      <div class="form-group has-feedback">
        <input type="text" name="uname" class="form-control" placeholder="用户名" required>
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" name="alias" class="form-control" placeholder="昵称" required>
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="passwd" class="form-control" placeholder="密码" required>
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="confirmPasswd" class="form-control" placeholder="确认密码" required>
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox" name="agree" id="agreeCheckbox"> 我同意服务条款
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="button" id="btnRegister" class="btn btn-primary btn-block btn-flat">注册</button>
        </div>
        <!-- /.col -->
      </div>
    </form>
    <a href="login" class="text-center">已有账号？登录</a>
    
    <!-- 错误信息显示区域 -->
    <div id="errorMsg" class="text-danger" style="margin-top: 15px; display: none; transition: all 0.3s ease;"></div>
  </div>
  <!-- /.register-box-body -->
</div>
<!-- /.register-box -->
<script th:inline="none">
  $(function () {
    // 确保 DOM 完全加载后初始化 iCheck
    setTimeout(function() {
      $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' /* optional */
      });
      
      // 添加明显的视觉反馈
      $('#agreeCheckbox').on('ifChecked', function(event) {
        $(this).closest('.checkbox').addClass('text-primary');
      });
      
      $('#agreeCheckbox').on('ifUnchecked', function(event) {
        $(this).closest('.checkbox').removeClass('text-primary');
      });
    }, 100);
    
    // 表单元素动画效果
    $('.form-control').focus(function() {
      $(this).parent().find('.form-control-feedback').css('color', '#3c8dbc');
    }).blur(function() {
      $(this).parent().find('.form-control-feedback').css('color', '');
    });
    
    // 错误信息显示动画
    function showErrorWithAnimation(message) {
      $('#errorMsg').text(message).hide().fadeIn(300);
    }
    
    // 注册按钮点击事件
    $('#btnRegister').click(function() {
      // 按钮点击效果
      $(this).addClass('active').delay(200).queue(function(){
        $(this).removeClass('active').dequeue();
      });
      
      // 表单验证
      var uname = $('input[name="uname"]').val();
      var alias = $('input[name="alias"]').val();
      var passwd = $('input[name="passwd"]').val();
      var confirmPasswd = $('input[name="confirmPasswd"]').val();
      var agree = $('input[name="agree"]').is(':checked');
      
      // 隐藏之前的错误信息
      $('#errorMsg').hide();
      
      if (!uname || !alias || !passwd || !confirmPasswd) {
        showErrorWithAnimation('请填写完整信息');
        return;
      }
      
      if (passwd !== confirmPasswd) {
        showErrorWithAnimation('两次输入的密码不一致');
        return;
      }
      
      if (!agree) {
        showErrorWithAnimation('请同意服务条款');
        return;
      }
      
      // 提交注册 - 使用RESTful API
      $.ajax({
        url: '/api/auth/register',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          uname: uname,
          alias: alias,
          passwd: passwd
        }),
        success: function(response) {
          if (response.code === 200) {
            alert('注册成功，即将跳转到登录页');
            window.location.href = 'login';
          } else {
            showErrorWithAnimation(response.message || '注册失败，请稍后再试');
          }
        },
        error: function(xhr) {
          try {
            var response = JSON.parse(xhr.responseText);
            showErrorWithAnimation(response.message || '服务器错误，请稍后再试');
          } catch(e) {
            showErrorWithAnimation('服务器错误，请稍后再试');
          }
        }
      });
    });
  });
</script>
</body>
</html> 